Merge pull request #11 from zephex-alt/deploy-on-cloudflare

video player change, font changes and other minor changes

2 files changed, 12 insertions, 17 deletions

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
index 9f6145c..2018a1c 100644
--- a/src/app/kdrama/[id]/buttons.jsx
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -1,23 +1,21 @@
 "use client";

 import styles from "../styles/info.module.css";

 import getVideoLink from "../components/videoLink";

-import React, { useEffect, useState } from "react";

+import React, { useState } from "react";

 import { MediaPlayer, MediaProvider } from "@vidstack/react";

-import "@vidstack/react/player/styles/base.css";

-import "@vidstack/react/player/styles/plyr/theme.css";

+import "@vidstack/react/player/styles/default/theme.css";

+import "@vidstack/react/player/styles/default/layouts/video.css";

 import {

-	PlyrLayout,

-	plyrLayoutIcons,

-} from "@vidstack/react/player/layouts/plyr";

+	defaultLayoutIcons,

+	DefaultVideoLayout,

+} from "@vidstack/react/player/layouts/default";

 

 export default function EpisodesButtons({ data: episodeData, id: dramaId }) {

 	const [videoLink, setVideoLink] = useState(null);

-	const [episode, setEpisode] = useState("");

 

 	async function test(a, b, episodeText) {

 		let link = await getVideoLink(a, b);

 		setVideoLink(link);

-		setEpisode(episodeText);

 	}

 

 	return (

@@ -32,7 +30,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 								onClick={(event) => {

 									test(item.id, dramaId, item.title);

 									event.currentTarget.style.backgroundColor =

-										"var(--soft-purple)";

+										"#D08770";

 								}}

 							>

 								<p>{item.title}</p>

@@ -55,7 +53,6 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 						<MediaPlayer

 							title="dramaPlayer"

 							src={videoLink}

-							aspectRatio="16/9"

 							load="eager"

 							className={styles.VideoPlayer}

 							playsInline

@@ -63,7 +60,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 							volume={0.8}

 						>

 							<MediaProvider />

-							<PlyrLayout icons={plyrLayoutIcons} />

+							<DefaultVideoLayout icons={defaultLayoutIcons} />

 						</MediaPlayer>

 						<button

 							className={styles.closeButton}

diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index 69a42c2..38593e7 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -3,6 +3,8 @@ import Image from "next/image";
 import EpisodesButtons from "./buttons";

 import { PreFetchVideoLinks } from "../components/cacher";

 

+export const runtime = "edge";

+

 export default async function DramaInfo({ params }) {

 	const id = decodeURIComponent(params.id);

 	const info = await getDramaInfo(id);

@@ -35,9 +37,7 @@ export default async function DramaInfo({ params }) {
 						<span className={styles.genreMain}>Genres: </span>

 						{info.genres &&

 							info.genres.map((item, index) => (

-								<span key={index} className={styles.genreEntry}>

-									{item}

-								</span>

+								<p key={index}>{item}</p>

 							))}

 					</div>

 

@@ -46,9 +46,7 @@ export default async function DramaInfo({ params }) {
 						<span className={styles.genreMain}>AKA: </span>

 						{info.otherNames &&

 							info.otherNames.map((item, index) => (

-								<span key={index} className={styles.genreEntry}>

-									{item}

-								</span>

+								<p key={index}>{item}</p>

 							))}

 					</div>